<template>
  <div class="login-wrap">
    <div class="login-div">
      <!--左边透明-->
      <div class="left_transparent">
        <div style="width:100%;padding-left:15px;">
          <div style="display:flex;align-items:center;">
            <span style="color:#fff;font-size:22px;">欢迎来到</span>
            <img src="../../static/images/jiantou.png" class="left_icon"/>
          </div>
          <div class="left_div_white"></div>
          <div>
            <span style="color:#fff;font-size:22px;">监理眼后台管理系统</span>
          </div>
        </div>
      </div>
      <!--右边-->
      <div id="forgetIcon">
        <el-form class="login-form" :rules="loginRules" ref="formName" :model="form">
          <el-form-item>
            <el-input
              v-model="form.phone"
              clearable
              placeholder="输入手机号"
              style="width:100%"
            >
              <template slot="prepend">
                <i class="el-icon-mobile-phone" style="font-size:24px;color:#fff"></i>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-input
              clearable
              v-model="form.code"
              placeholder="验证码"
              style="width:100%"
              :disabled="this.sendAuthCode"
            >
              <template slot="prepend">
                <i class="el-icon-circle-check" style="font-size:24px;color:#fff"></i>
              </template>
              <div v-show="sendAuthCode" class="forget_pass" slot="append" @click="getCode()" style="width:75px;">
                获取验证码
              </div>
              <div v-show="!sendAuthCode" slot="append" style="width:75px;">
                <span style="color:#409eff">{{auth_time}}</span>
                &nbsp;秒内有效
              </div>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-input
              show-password
              clearable
              v-model="form.newPass"
              placeholder="输入新密码"
              style="width:100%"
            >
              <template slot="prepend">
                <img src="../../static/images/password.png"/>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <div class="login_button">
              <el-button type="primary" style="width:100%;background:#367FA8" @click="updateSure('form')">确定</el-button>
            </div>
          </el-form-item>
          <el-form-item>
            <div style="text-align:end;">
              <i class="el-icon-back" style="color:#409eff;"></i>
              <span class="back_login" @click="goBack()">返回登录</span>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
  import myhttp, {
    isEmpty,
    msgError,
    msgSuccess,
    msgWarning
  } from "../utils/myhttp";
  import api from "../utils/api";
  import qs from "qs";
  import {formatDate} from "../utils/date.js";

  export default {
    global: false,
    data() {
      return {
        form: {
          phone: "",
          code: "",
          newPass: "",
        },
        loginRules: {
          phone: [
            {required: true, message: "手机号为0-11位数字", trigger: "blur"},
          ],
          newPass: [
            {required: true, message: "密码格式为3-12位，只能是字母、数字", trigger: "blur"},
          ],
        },
        sendAuthCode: true,
        auth_time: 0, //倒计时
      };
    },

    created() {
    },
    destroyed() {
    },
    mounted() {
    },
    methods: {
      //获取验证码
      getCode: async function () {
        if (this.validatePhone()) {
          this.openLoading();
          var res = await $.post("getVerificationCode", {
            phoneNumber: this.form.phone,
            signName: '扬子石化工程',
            templateCode: 'SMS_153850036',
          });
          if (!res.success) return $.msgError('获取验证码失败！');
          this.loading2.close();
          $.msgSuccess('验证码已发送,请注意查收！');
          this.loading2.close();
          this.validateBtn();
        }
        ;
      },
      //判断手机号是否合法
      validatePhone() {
        if (!this.form.phone) {
          msgWarning(this, "手机号不能为空！");
        } else if (!(/^1[3456789]\d{9}$/.test(this.form.phone))) {
          msgWarning(this, "请输入正确的手机号码！");
        } else {
          return true;
        }
      },
      //验证码倒计时60秒
      validateBtn() {
        this.sendAuthCode = false;
        this.auth_time = 60;
        var auth_timetimer = setInterval(() => {
          this.auth_time--;
          if (this.auth_time <= 0) {
            this.sendAuthCode = true;
            clearInterval(auth_timetimer);
          }
        }, 1000);
      },
      //确定  || !(/^[A-Za-z0-9]{3,12}$/.test(this.form.newPass))
      updateSure() {
        if (!this.form.phone) {
          msgWarning(this, "手机号码不能为空！");
        } else if (!(/^1[3456789]\d{9}$/.test(this.form.phone))) {
          msgWarning(this, "请输入正确的手机号码！");
        } else if (!this.form.code) {
          msgWarning(this, "验证码不能为空！");
        } else if (!this.form.newPass) {
          msgWarning(this, "密码不能为空！");
        } else if (!(/^[A-Za-z0-9]{3,12}$/.test(this.form.newPass))) {
          msgWarning(this, "密码只能输入字母或数字,且必须是3-12位！");
        } else {
          this.doSure();
        }
      },
      doSure: async function () {
        var res = await $.post("forgetPassword", {
          phoneNumber: this.form.phone,
          userPassword: this.form.newPass,
          verificationCode: this.form.code,
          // type:1,
        });
        if (!res.success) return $.msgError(res.msg || "error!");
        $.msgSuccess('密码重置成功！');
        this.$parent.C1 = false;
      },
      goBack() {
        this.$parent.C1 = false;
      },
      openLoading() {
        this.loading2 = this.$loading({
          lock: true,
          text: "Loading",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)"
        });
      },
    },
  };
</script>

<style lang="scss" scoped>
  // @import "../assets/css/lib-variable";
  @import "../assets/css/_lib-mixin";

  html,
  body {
    overflow: hidden;
  }

  .login-wrap {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(../../static/images/background.png);
    background-size: cover;
  }

  .login-div {
    // width: 40%;
    width: 768px;
    display: flex;
    position: absolute;
    top: 50%;
    left: 20%;
    transform: translateY(-50%);
  }

  /*左边透明*/
  .left_transparent {
    background: rgba(0, 0, 0, 0.4);
    // width: 55%;
    padding: 50px 15px 20px 15px;
    display: flex;
    align-items: center;
    width: 410px;
  }

  /*左侧 图标*/
  .left_icon {
    width: 24px;
    height: 24px;
    margin-left: 10px;
  }

  /*左侧 白色透明 div*/
  .left_div_white {
    background: rgba(255, 255, 255, 0.4);
    border-radius: 2px;
    height: 2px;
    width: 100%;
    margin: 10px 0;
  }

  /*右侧*/
  #forgetIcon {
    background: #fff;
    // width: 45%;
    // padding: 55px 18px 25px 18px;
    padding: 50px 18px 20px 18px;
    width: 357px;
    height: 300px;
  }

  .login-form {
    .login-code {
      cursor: pointer;

      .login-code-img {
        width: 100px;
        height: 38px;
        background-color: #eee;
        border: 1px solid #f0f0f0;
        color: #333;
        font-size: 18px;
        font-weight: bold;
        letter-spacing: 2px;
        text-indent: 2px;
        text-align: center;
      }
    }
  }

  .forget_pass {
    cursor: pointer;
  }

  .forget_pass:hover {
    color: #409eff;
  }

  .back_login {
    color: #409eff;
    cursor: pointer;
    font-size: 14px;
  }
</style>
